<template>
	<view class="page-body-class">
    <view class="page-body-title">
      御品臻享
      <image src="@/image/carnival/title-icon.png" style="width: 44rpx;height: 44rpx"/>
      品质至上
    </view>
    <view class="page-body-item"  v-for="(item,index) in discountList">
      <image src="@/image/carnival/0.png" style="width: 100%" v-if="index % 4 === 0"/>
      <image src="@/image/carnival/1.png" style="width: 100%" v-if="index % 4 === 1"/>
      <image src="@/image/carnival/2.png" style="width: 100%" v-if="index % 4 === 2"/>
      <image src="@/image/carnival/3.png" style="width: 100%" v-if="index % 4 === 3"/>
      <view class="page-body-item-name">{{item.active_desc}}</view>
      <view class="page-body-item-title" @click="redirect({ url: '/addon/shop/pages/goods/list' })">
        查看全部
        <image src="@/image/carnival/all.png" style="width: 50rpx;height: 24rpx;margin-left: 12rpx"/>
      </view>
      <view class="page-body-item-list">
        <view class="page-body-item-list-item" v-for="(items, indexs) in item.active_goods_info" @click="toLink(items)">
          <image :src="img(items.goods_cover_thumb_mid ? items.goods_cover_thumb_mid : '')" style="width: 100%;height: 80%;border-radius: 10rpx"/>
          <view style="background: linear-gradient(to right,#ffffff00 0%, #ffffff00 10%, #ffffff50 11%, #ffffff00 100%);display: flex;align-items: center;">
            <image src="@/image/carnival/icon/0.png" style="width: 36rpx;height: 36rpx" v-if="index % 4 === 0"/>
            <image src="@/image/carnival/icon/1.png" style="width: 36rpx;height: 36rpx" v-if="index % 4 === 1"/>
            <image src="@/image/carnival/icon/2.png" style="width: 36rpx;height: 36rpx" v-if="index % 4 === 2"/>
            <image src="@/image/carnival/icon/3.png" style="width: 36rpx;height: 36rpx" v-if="index % 4 === 3"/>
            <view class="text-[#ffffff] mt-[-15rpx] text-center text-[22rpx]" style="line-height: 1.5;transform: translateY(8rpx)">
              ￥
              <text class="text-[26rpx]">{{parseFloat(items.discount_price).toFixed(2).split('.')[0]}}.</text>
              <text class="text-[22rpx]">{{parseFloat(items.discount_price).toFixed(2).split('.')[1]}}</text>
            </view>
          </view>
<!--          <u&#45;&#45;image width="100%" height="80%" radius="16rpx" :src="img(items.goods_cover_thumb_mid ? items.goods_cover_thumb_mid : '')" model="aspectFill">-->
<!--            <template #error>-->
<!--              <image class="rounded-[16rpx] overflow-hidden w-[240rpx] h-[240rpx]" :src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill"></image>-->
<!--            </template>-->
<!--          </u&#45;&#45;image>-->
        </view>
      </view>
    </view>
<!--    <view class="page-body-item">-->
<!--      <image src="@/image/carnival/topone.png" style="width: 100%"/>-->
<!--      <view class="page-body-item-title">-->
<!--        查看全部-->
<!--        <image src="@/image/carnival/all.png" style="width: 50rpx;height: 24rpx;margin-left: 12rpx"/>-->
<!--      </view>-->
<!--    </view>-->
<!--    <view class="page-body-item">-->
<!--      <image src="@/image/carnival/toptwo.png" style="width: 100%"/>-->
<!--      <view class="page-body-item-title">-->
<!--        查看全部-->
<!--        <image src="@/image/carnival/all.png" style="width: 50rpx;height: 24rpx;margin-left: 12rpx"/>-->
<!--      </view>-->
<!--    </view>-->
<!--    <view class="page-body-item">-->
<!--      <image src="@/image/carnival/topthree.png" style="width: 100%"/>-->
<!--      <view class="page-body-item-title">-->
<!--        查看全部-->
<!--        <image src="@/image/carnival/all.png" style="width: 50rpx;height: 24rpx;margin-left: 12rpx"/>-->
<!--      </view>-->
<!--    </view>-->
<!--    <view class="page-body-item">-->
<!--      <image src="@/image/carnival/topfour.png" style="width: 100%"/>-->
<!--      <view class="page-body-item-title">-->
<!--        查看全部-->
<!--        <image src="@/image/carnival/all.png" style="width: 50rpx;height: 24rpx;margin-left: 12rpx"/>-->
<!--      </view>-->
<!--    </view>-->
    <tabbar />
	</view>
</template>
<script setup lang="ts">
import { onLoad, onShow } from '@dcloudio/uni-app'
import {getActiveDiscountList} from "@/addon/shop/api/discount";
import {ref} from "vue";
import {img, redirect} from "@/utils/common";
onLoad((options:any) => {
});
const discountList = ref<Array<Object>>([])
onShow(() => {
  getActiveDiscountList({limit:4}).then((res:any)=>{
    discountList.value = res.data
  })
});
const toLink = (item : any) => {
  redirect({ url: '/addon/shop/pages/goods/detail', param: { sku_id :item.goodsSku.sku_id } })
}


</script>
<style lang="scss" scoped>
.page-body-class {
  height: 95vh;
  background-image: url("../../../../image/carnival/background.png");
  background-size: 100% 100%;
  padding-top: 5vh;
  overflow: auto;
}
.page-body-item {
  position: relative;
  width: 100%;
}
.page-body-title {
  height: max-content;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 44rpx;
  margin-bottom: 20rpx;
}
.page-body-item-title {
  position: absolute;
  font-size: 26rpx;
  letter-spacing: 2rpx;
  align-items: center;
  justify-content: center;
  top: 50rpx;
  right: 6vw;
  color: #ffffff;
}
.page-body-item-name {
  position: absolute;
  font-size: 30rpx;
  letter-spacing: 2rpx;
  top: 60rpx;
  left: 8vw;
  color: #ffffff;
  font-weight: bolder;
}
.page-body-item-list {
  position: absolute;
  width: 90%;
  height: 220rpx;
  top: 150rpx;
  left: 5%;
  display: flex;
}
.page-body-item-list-item {
  width: 24%;
  margin: 0 0.5%;
  height: 100%;
}
.bg-class {
  background-image: url("../../../../image/carnival/icon/0.png");
  background-size: auto 80%;
  background-repeat: no-repeat;
  background-position: center left;
  padding-left: 20rpx;
}
</style>
